import React, { Component } from "react";
import { Button, Input, Icon, Table, Progress } from "antd";
import "./home.less";
import { formateDate } from "../../../utils/dateUtils";
import LinkButton from "../../../components/link-button";
const { Search } = Input;

class database extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          key: "1",
          name: "iok",
          type: "立即执行",
          creator: "zsz",
          asset: "1",
          timeConsuming: "5秒",
          plan: "100",
          state: "停止",
        },
      ],
      columns: [
        {
          title: "任务名称",
          dataIndex: "name",
          render: (text) => <LinkButton>{text}</LinkButton>,
        },
        {
          title: "任务类型",
          dataIndex: "type",
        },
        {
          title: "创建者",
          dataIndex: "creator",
        },
        {
          title: "存货资产数",
          dataIndex: "asset",
        },
        {
          title: "开始时间",
          dataIndex: "create_time",
          render: (create_time) => {
            if (formateDate(create_time)) {
              return formateDate(create_time);
            }
            return "2021-12-01 12:04";
          },
        },
        {
          title: "耗时",
          dataIndex: "timeConsuming",
        },
        {
          title: "进度",
          dataIndex: "plan",
          render: (text) => {
            return <Progress style={{ width: 200 }} percent={text} />;
          },
        },
        {
          title: "状态",
          dataIndex: "state",
        },
        {
          title: "操作项",
          dataIndex: "Actionitems",
          render: () => (
            <span>
              <LinkButton style={{ width: 40, color: "blue" }}>执行</LinkButton>
              <LinkButton
                style={{ width: 40, color: "blue" }}
                onClick={() => {
                  this.props.history.push("/task/databasedetaile");
                }}
              >
                查看
              </LinkButton>
              <LinkButton
                style={{ width: 40, color: "red" }}
                onClick={() => this.delete1()}
              >
                删除
              </LinkButton>
              <LinkButton style={{ width: 40, color: "blue" }}>编辑</LinkButton>
            </span>
          ),
        },
      ],
    };
  }
  delete1 = () => {
    const selectedRowKeys = this.state.selectedRowKeys;
    let dataSource = this.state.data;
    for (let i = selectedRowKeys; i >= 0; i--) {
      dataSource.splice(selectedRowKeys, 1);
    }
    this.setState({
      data: dataSource,
      selectedRowKeys: [],
    });
  };
  delete = () => {
    const selectedRowKeys = this.state.selectedRowKeys;
    let dataSource = this.state.data;
    for (let i = selectedRowKeys.length - 1; i >= 0; i--) {
      dataSource.splice(Number.parseInt(selectedRowKeys[i] - 1), 1);
    }
    this.setState({
      data: dataSource,
      selectedRowKeys: [],
    });
  };
  onSelectChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  };
  render() {
    const { selectedRowKeys, data, columns } = this.state;
    const rowSelection = {
      type: "checkbox",
      selectedRowKeys: selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    return (
      <div className="home-wap">
        <div className="home-wap-top">
          <div className="home-wap-top-btn">
            <Button
              type="primary"
              onClick={() => {
                this.props.history.push("/task/databasenew");
              }}
            >
              新建
            </Button>
            <Button type="danger" style={{ marginLeft: 5 }}>
              删除
            </Button>
          </div>
          <div className="home-wap-top-right">
            <Search
              placeholder="请输入关键字"
              onSearch={(value) => console.log(value)}
              style={{ width: 200 }}
            />
            <Icon type="up" />
            <Icon type="setting" />
          </div>
        </div>
        <div className="home-bottom">
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
          />
        </div>
      </div>
    );
  }
}

export default database;
